<template>
  <div class="app-container">
    <el-form ref="placeCodeForm" v-loading="formLoading" :rules="rules" :model="form" label-position="top">
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form-item label="旧密码" prop="pastPassWord" style="width: 400px">
            <el-input v-model="form.pastPassWord" placeholder="请输入旧密码" show-password  />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form-item label="新密码" prop="newPassWord" style="width: 400px">
            <el-input v-model="form.newPassWord" placeholder="请输入新密码" show-password  />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row type="flex" :gutter="20">
        <el-col :span="24">
          <el-form-item label="确认新密码" prop="affirmPassWord" style="width: 400px">
            <el-input v-model="form.affirmPassWord" placeholder="请再次输入新密码" show-password  />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
</template>

<script>

import {updatePassWordApi} from "@/api/user";
export default {
  name: 'passWord',
  data(){
    return{
      form: {
        id: null,
        pastPassWord: '',
        newPassWord:'',
        affirmPassWord:'',
      },
      rules: {
        pastPassWord: [{ required: true, trigger: 'blur', message: '请输入旧密码' }],
        newPassWord: [{ required: true, trigger: 'blur', message: '请输入新密码' }],
        affirmPassWord: [{ required: true, trigger: 'blur', message: '请再次输入新密码' }],
      },
      formLoading: false,
      placeTypeLoading:true,
    }
  },
  props:['id','closeDialog'],
  methods:{
    submit(){
      this.$refs.placeCodeForm.validate(valid => {
        if (valid) {
          if(this.form.newPassWord!==this.form.affirmPassWord)
          {
            this.$message.error('两次密码输入不一致');
            return false;
          }
          if(this.form.newPassWord.length<6)
          {
            this.$message.error('密码长度不能小于6位');
            return false;
          }
          const loading=this.$loading({
            text:'提交中'
          })
          const form=JSON.parse(JSON.stringify(this.form));
          updatePassWordApi(form).then((res)=>{
            this.$message.success('修改成功');
            this.closeDialog(0);
          }).catch(()=>{

          }).finally(()=>{
            loading.close();
          })
        } else {
          return false
        }
      })
    },

  },
  mounted() {

  },
}
</script>
<style src="../../../node_modules/@wangeditor/editor/dist/css/style.css"></style>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #c5c5c5;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

}
</style>
<style scoped>
/*
*让select撑开
*/
.el-select,.el-cascader{
  display: block;
}
.avatar-uploader .el-upload {
  border: 1px dashed #c5c5c5;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;

}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
